<template>
  <div id="switch-to-user">
    <h3>
      <van-icon
        name="arrow-left"
        color="rgb(107, 107, 107)"
        @click="routerGoBack"
      />
      <span>设置</span>
    </h3>
    <p>
      <img src="../../assets/image/images/loginImg/wechatgray.jpg" />
    </p>
    <h4>轻触头像以切换账号</h4>
    <div class="user-card">
      <div class="item">
        <span>
          <img :src="imgurl" />
        </span>
        <div class="text">
          <h3>{{ userNickName }}</h3>
          <p>{{ userPhone }}</p>
        </div>
      </div>
      <div class="item" @click="isRouterLogin">
        <span>
          <img src="../../assets/image/images/more-user.jpg" />
        </span>
        <div class="text">
          <h3>添加其他账号</h3>
        </div>
      </div>
      <van-popup
        class="popup"
        v-model="showPopup"
        round
        position="bottom"
        get-container="#switch-to-user"
        :style="{ backgroundColor: 'rgba(44, 44, 44, 1)', height: '25%' }"
      >
        <p :style="{ margin: '0', padding: '20px 0' }" @click="routerLogin">
          登录其他账号
        </p>
        <p
          @click="routerRigster"
          :style="{
            margin: '0',
            padding: '20px 0',
            borderTop: '1px solid rgba(75, 75, 75, 1)',
          }"
        >
          注册一个新的账号
        </p>
        <p
          @click="Cencel"
          :style="{
            margin: '0',
            padding: '20px 0',
            borderTop: '5px solid rgba(31, 31, 31, 1)',
          }"
        >
          取消
        </p>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      imgurl: this.$route.params.imgurl,
      userNickName: this.$route.params.userNickName,
      userPhone: this.$route.params.userPhone,
    };
  },
  methods: {
    routerGoBack() {
      this.$router.go(-1);
    },
    isRouterLogin() {
      this.showPopup = true;
    },
    routerLogin() {
      this.$store.commit("setIsLogin", false);
      this.$cookies.remove("wxUserToken");
      sessionStorage.removeItem("wxUserInfo");
       WebIM.conn.close();
      this.$router.push({ path: "/login" });
      
    },
    routerRigster() {
      this.$store.commit("setIsLogin", false);
      this.$cookies.remove("wxUserToken");
      sessionStorage.removeItem("wxUserInfo");
       WebIM.conn.close();
      this.$router.push({ path: "/register" });
    },
    Cencel() {
      this.showPopup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
#switch-to-user {
  width: 100vw;
  height: 100vh;
  color: #fff;
  background-color: var(--theme-background-black);
  h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
    span {
      flex: 1;
      text-align: center;
      margin-right: 28px;
      width: 100%;
      color: #eee;
    }
  }
  p {
    text-align: center;
    img {
      width: 120px;
    }
  }
  h4 {
    text-align: center;
    font-size: 18px;
  }
  .user-card {
    padding: 15px;
    .item {
      display: flex;
      align-items: center;
      flex-direction: row;
      padding: 15px;
      height: 80px;
      box-sizing: border-box;
      background-color: var(--theme-cell-black);
      margin: 10px 0;
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        h3,
        p {
          margin-top: 10px 0 0 0;
          padding: 0;
        }
      }

      span {
        img {
          width: 45px;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>